<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { isMobile } from '@/utils/device'
import { getToken } from '@/utils/auth'

export default  {
  name:  'App',
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  watch: {
    // 监听路由变化，确保在路由变化后也检测设备类型
    $route: {
      handler(to) {
        // 如果已登录且是移动设备但不在移动端路由，则重定向到移动端首页
        if (getToken() && isMobile() && !to.path.includes('/mobile')) {
          this.$router.replace('/mobile/index');
        }
      },
      immediate: false // 避免和created中的检测重复执行
    }
  },
  created() {
    // 检测设备类型，如果是移动设备且当前不在移动端路由，则重定向到移动端首页
    if (isMobile() && !this.$route.path.includes('/mobile')) {
      // 所有移动设备用户都直接跳转到移动端首页
      this.$router.replace('/mobile/index');
    }
  },
  mounted() {
    // 在组件挂载后再次检测，确保设备检测的可靠性
    this.$nextTick(() => {
      if (getToken() && isMobile() && !this.$route.path.includes('/mobile')) {
        this.$router.replace('/mobile/index');
      }
    });
  }
}
</script>
